<template>
  <div class="project_tabs">
    <BasicTabs :tabsList="tabsList" @handle-change="handleChange" :tabsValue="activeKey">
      <template #rightExtra>
        <div class="title-manage" @click="editTypeModal">
          <SvgIcon class="iconDef" :name="'biaoqian'" :color="'#586371'" width="16" height="16" />
          <div class="label-manage">项目类型配置</div>
        </div>
      </template>
    </BasicTabs>
  </div>
  <div class="project_management">
    <div class="operation_management_right container">
      <tableContent ref="tableContentRef" />
    </div>
  </div>
  <projectConfig ref="projectConfigRef" @save-data="saveData" />
</template>

<script setup lang="ts">
import tableContent from './tableContent.vue';
import { ProjectManagemenStatus } from '@/enums/projectManagemenEnum';
import projectConfig from './projectConfig.vue';
const tabsList = ref([
  { name: '全部项目', key: ProjectManagemenStatus.allProjects },
  { name: '未开始', key: ProjectManagemenStatus.havNotStarted },
  { name: '进行中', key: ProjectManagemenStatus.underway },
  { name: '已完成', key: ProjectManagemenStatus.offTheStocks },
]);

const activeKey = ref<string>(ProjectManagemenStatus.allProjects);
const tableContentRef = ref<any>(null);

const handleChange = (key: string) => {
  activeKey.value = key;
  tableContentRef.value.refreshTable(key);
};

const projectConfigRef = ref<any>(null);
const editTypeModal = () => {
  projectConfigRef.value.editTypeModal();
};

const saveData = () => {
  tableContentRef.value.refreshSelect();
};
</script>

<style scoped lang="less">
.project_tabs {
  width: 100%;
  margin-bottom: 16px;
  background-color: #fff;
  padding: 0 24px;
  border-radius: 8px;

  :deep(.ant-tabs-nav) {
    margin: 0;
  }

  .title-manage {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 66px;
    .label-manage {
      margin-left: 8px;
    }
  }
}
.project_management {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  .project_management_right {
    overflow: auto;
  }
}
</style>
